<template>
  <div class="list">
    <Draggable
      v-model="newList"
      chosen-class="chosen"
      force-fallback="true"
      animation="1000"
      handle=".mover"
      @start="onStart"
      @end="onEnd"
    >
      <div class="item" v-for="node in newList" :key="node.index || node.id">
        <a-icon class="mover" type="unordered-list" />
        <a-textarea
          placeholder="选项描述文字"
          v-model.trim="node.optionContent"
          :maxLength="100"
          :rows="3"
        />
        <a-icon
          class="remove"
          type="close-circle"
          v-show="list.length > 2"
          @click="removeList(node)"
        />
      </div>
    </Draggable>
    <a-button class="adBtn" type="dashed" icon="plus" @click="handleAddList"
      >添加</a-button
    >
  </div>
</template>

<script>
import Draggable from "vuedraggable";

export default {
  name: "SelectList",
  components: {
    Draggable
  },
  data() {
    return {
      drag: false,
      newList: []
    };
  },
  inject: ["handleAddList", "removeList", "handleSortList"],
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    list: {
      immediate: true,
      handler(value) {
        this.newList = [...value];
      }
    }
  },
  methods: {
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
      this.handleSortList(this.newList);
    }
  }
};
</script>
<style lang="less" scoped>
.list {
  padding: 20px 0;
  .item {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 10px;
    position: relative;
    .ant-input {
      width: 100%;
    }
    i {
      margin: 0 10px;
      font-size: 18px;
      color: #9c9ea4;
    }
    .mover {
      cursor: move;
    }
    .remove {
      cursor: pointer;
      position: absolute;
      right: -40px;
      top: 0;
    }
  }
  .adBtn {
    margin-left: 38px;
    width: calc(100% - 38px);
    color: @primary-color;
    border-color: @primary-color;
  }
}
</style>
